<template>
    <a-layout-content class="content">
        <a-layout class="content-wrapper">
            <a-layout-sider :class="['layout-sider', 'sider']">
                <Condition v-if="isOnline" />
                <Tabs v-else />
                <List :data="data" />
                <Footer v-if="isOnline" />
            </a-layout-sider>
            <a-layout-content>
                <Editor :history="isOnline" />
            </a-layout-content>
        </a-layout>
    </a-layout-content>
</template>
<script lang="ts" setup>
import {Editor} from "@/components";
import Tabs from "../HistoryComponents/Tabs.vue";
import Condition from "../OnlineComponents/Condition.vue";
import Footer from "../OnlineComponents/Footer.vue";
import List from "./List.vue";

const {type} = defineProps({
    type: {
        type: String,
        default: "online",
        required: true,
    },
});

const isOnline = type === "online";

// 选中当前项
const item = {
    avatar: "https://wework.qpic.cn/wwpic3az/318264_HVy9hWr1Rm2cZBD_1724924136/0",
};

const data = new Array(20).fill("").map((_, id) => ({...item, id}));
</script>
<style lang="less" scoped>
.content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .sider {
        box-sizing: border-box;
        flex: 0 0 260px !important;
        width: 260px !important;
        min-width: fit-content !important;
        max-width: 260px !important;
        :deep(.ant-layout-sider-trigger) {
            width: 260px !important;
        }
    }

    .layout-sider {
        background-color: #fff;
        border-right: 1px solid #f0f0f0;
        display: flex;
        flex-direction: column;
        :deep(.ant-layout-sider-children) {
            display: flex;
            flex-direction: column;
        }
    }
}
</style>
